import React, {useEffect, useState} from 'react'
import type {ColumnsType} from 'antd/es/table'
import {Button, Tag} from 'antd'
import {useHistory} from 'umi'
import {PlusOutlined} from '@ant-design/icons'
import SearchForm from '@/components/SearchForm'
import CustomTable from '@/components/Table'
import styles from './index.less'
import {
	getTemplateType,
	templateconfigList,
} from '@/service/system/templateMaintenance'
import {getCompany} from '@/service/common'
import Permissions from '@/components/Permissions'

const formItemLayout = {
	labelCol: {flex: '80px'},
	wrapperCol: {flex: '1'},
}

const getCookie = (name: any) => {
	const strcookie = document.cookie
	const arrcookie = strcookie.split('; ')
	for (let i = 0; i < arrcookie.length; i += 1) {
		const arr = arrcookie[i].split('=')
		if (arr[0] === name) {
			return arr[1]
		}
	}
	return ''
}

export default function documentLists() {
	const history = useHistory()
	const [formData, setFormData] = useState({})
	const [company, setCompany] = useState<any>()
	const [total, setTotal] = useState()
	const [params, setParams] = useState<any>({
		current: 1,
		size: 10,
	})
	const [tableList, setTableList] = useState<any[]>([])
	const [loading, setLoading] = useState(false)
	const [templateType, setTemplateType] = useState([])

	useEffect(() => {
		getTemplateType().then((res: any) => {
			if (res.data) {
				setTemplateType(res.data)
			}
		})
	}, [])
	useEffect(() => {
		const merchantId = getCookie('orgId')
		getCompany({merchantId}).then((res: any) => {
			if (res.data) {
				res.data.forEach((item: any) => {
					if (Number(item.id) === Number(merchantId))
						setCompany(item.name)
				})
			}
		})
	}, [])

	const getTabelValue = async (value: any, pagination?: any) => {
		setLoading(true)
		let values = value
		setFormData(values)
		const newPagination = pagination || {
			current: 1,
			size: params?.size,
		}
		setParams(newPagination)
		values = {
			...values,
			...newPagination,
		}
		const res = await templateconfigList(values)
		if (res?.data) {
			setTotal(res.data?.total || 0)
			if (res.data?.records) {
				setTableList(res.data?.records || [])
			}
		}
		setLoading(false)
	}

	useEffect(() => {
		getTabelValue(formData)
	}, [])

	const formItems: any[] = [
		{
			type: 'group',
			key: 'group1',
			groupItems: [
				{
					type: 'select',
					key: 'templateType',
					name: 'templateType',
					label: '模板类型',
					// showSearch: false,
					keys: 'value',
					title: 'text',
					items: templateType.map((item: string) => ({
						value: item,
						text: item,
					})),
				},
				{},
				{},
			],
		},
	]

	const columns: ColumnsType<InitiationAPI.InitiationColumns> = [
		{
			title: '模板类型',
			dataIndex: 'templateType',
			align: 'center',
		},
		{
			title: '是否有附件',
			dataIndex: 'url',
			align: 'center',
			render: (text: any, record: any) =>
				text ? (
					<Button type="link" onClick={() => window.open(text)}>
						<span style={{textDecoration: 'underline'}}>
							{record?.fileName}
						</span>
					</Button>
				) : (
					'否'
				),
		},
		{
			title: '模板ID',
			dataIndex: 'templateId',
			align: 'center',
		},
		{
			title: '更新时间',
			dataIndex: 'updateTime',
			align: 'center',
		},
		{
			title: '操作人',
			dataIndex: 'updateUserStr',
			align: 'center',
		},
		{
			title: '操作',
			key: 'action',
			align: 'center',
			fixed: 'right',
			width: 100,
			render: (text, record: any) => (
				<div>
					<Button
						type="link"
						onClick={() =>
							history.push({
								query: {id: record?.id, company},
								pathname: `/systemSetup/templateMaintenanceList/editor`,
							})
						}>
						编辑
					</Button>
				</div>
			),
		},
	]

	const onFinish = (values: any) => {
		getTabelValue(values)
	}

	// 搜索重置
	const onReset = () => {
		getTabelValue({})
	}
	return (
		<div className={styles.page}>
			<div style={{marginTop: '15px', marginLeft: '10px'}}>
				所属公司：
				<Tag
					color="ebedf1"
					style={{
						color: '#a79e9e',
						paddingLeft: '15px',
						paddingRight: '15px',
					}}>
					{company}
				</Tag>
			</div>
			<div className={styles.search}>
				<SearchForm
					onFinish={onFinish}
					onReset={onReset}
					formItems={formItems}
					formLayout={formItemLayout}
				/>
			</div>

			<div className={styles.btnlist}>
				<Permissions permissionID="amc_system_systemSetup_templateMaintenanceList_add">
					<Button
						icon={<PlusOutlined />}
						type="primary"
						ghost
						size="small"
						onClick={() => {
							history.push({
								query: {company},
								pathname: `/systemSetup/templateMaintenanceList/add`,
							})
						}}>
						新增
					</Button>
				</Permissions>
			</div>
			<CustomTable
				params={params}
				columns={columns}
				total={total}
				pagination
				callback={(pagination: any) => {
					getTabelValue(formData, pagination)
				}}
				loading={loading}
				dataSource={tableList}
			/>
		</div>
	)
}
